<template>
  <div class="search">
    <form class="searchIpt">
      <div class="inputcover">
        <i class="svg-search"></i>
        <input type="text" v-model="keywords" />
        <label v-show="!keywords">搜索歌曲、歌手、专辑</label>
      </div>
    </form>
    <section v-show="keywords == ''">
        <div class="hotList">
            <h3>热门搜索</h3>
            <ul class="list">
                <li v-for="item in hotsList" :key="item.first">
                    <a href="javascript:;" @click="hotSearch(item.first)">
                        {{item.first}}
                    </a>
                </li>
            </ul>
        </div>
    </section>
    <Suggest :suggests="suggests" :keywords="keywords" @searchResult="searchList" v-show="showSearch"/>
    <SearchResult :searchResult="searchResult" v-show="showList" />
    <Loading v-show="showLoading" />
  </div>
</template>

<script>
import Loading from '../components/Loading'
import Suggest from '../components/Suggest'
import SearchResult from '../components/SearchResult'
export default {
  name: "Search",
  components: {
    Loading,
    Suggest,
    SearchResult
  },
  data() {
      return {
          hotsList: [],
          keywords: '',
          suggests: [],
          searchResult: [],
          showList: false,
          showSearch: false,
          showLoading: false
      }
  },
  methods: {
    searchList(keywords) {
      this.showLoading = true;
      this.axios.get('/search?keywords=' + keywords).then((response)=> {
        // console.log(response.data.result.songs);
        this.showLoading = false;
        this.showList = true;
        this.showSearch = false;
        if (response.data.code == 200) {
          let data = response.data.result.songs;
          let result = data.map((item)=>{
            return {
              name: item.name,
              id: item.id,
              song: {
                privilege: {
                  maxbr: 920000
                },
                artists: [item.artists[0].name]
              }
            }
          })
          this.searchResult = result;
        }
      })
    },
   hotSearch(val) {
     this.keywords = val;
   }
  },
  watch: {
    keywords(val) {
      this.suggests = [];
      this.showList = false;
      this.showLoading = true;
      if (val == '') {
        this.showLoading = false;  
      }
      this.axios.get('/search/suggest?keywords=' + val).then((response) => {
        // console.log(response.data.result);
        if (response.data.code == 200 && response.data.result.order) {
          this.showSearch = true;
          this.showLoading = false;
          let result = response.data.result;
          let re = result.order.reduce((reduce, item)=> {
            if (item !== 'playlists') {
              let rev = result[item];
              return reduce.concat(rev);
            }
            return reduce;
          },[])
          this.suggests = re;
          if (this.keywords == '') {
            this.suggests = [];
          }
        }
      })
    }
  },
  beforeRouteEnter(to, from, next) {
      next((vm) => {
          vm.$root.playingMusic.idList = [];
          vm.axios.get('/search/hot').then((response) => {
              // console.log(response.data.result.hots);
              vm.hotsList = response.data.result.hots;
          })
      })
  }
};
</script>

<style lang="less" scoped>
.searchIpt {
  position: relative;
  padding: 15px 10px;
  .inputcover {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 30px;
    background-color: #ebecec;
    padding: 0 30px;
    border-radius: 30px;
    input {
      width: 100%;
      height: 30px;
      border: none;
      outline: none;
      font-size: 14px;
      background: rgba(0, 0, 0, 0);
    }
    label {
      position: absolute;
      left: 32px;
      top: 5px;
      font-size: 14px;
      color: #c9c9c9;
      background: rgba(0, 0, 0, 0);
      pointer-events: none;
    }
    .svg-search {
      position: absolute;
      left: 0;
      top: 9px;
      margin: 0 8px;
      display: inline-block;
      width: 13px;
      height: 13px;
      background: url(../assets/search.svg) no-repeat;
      background-size: contain;
    }
  }
  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border-bottom: 1px solid rgba(0,0,0,.1);
    transform: scale(.5);
    transform-origin: top left;
  }
}
section {
    width: 100%;
    height: 157px;
    .hotList {
        width: 100%;
        height: 157px;
        padding: 15px 10px 0;
        h3 {
            font-size: 12px;
            line-height: 12px;
            color: #666;
            text-align: left;
        }
        .list {
            margin: 10px 0 7px;
            text-align: left;
            li {
                display: inline-block;
                height: 32px;
                font-size: 14px;
                line-height: 32px;
                color: #333;
                padding: 0 12px;
                margin: 0 8px 8px 0;
                border: 1px solid rgba(0, 0, 0, .1);
                border-radius: 32px;
                box-sizing: border-box;
                a {
                    text-decoration: none;
                    color: #333;
                }
            }
        }
    }
}
</style>
